<!--
 * @Description: 
  * @Author: LiuYan
 * @Date: 2022-04-22 15:03:23
 * @LastEditTime: 2022-07-20 16:53:03
 * @LastEditors: LiuYan
 * @Reference: 
-->
<template>
  <div id="app">
    <button @click="showYikAlert = !showYikAlert">YikAlert(开启关闭)</button>
    <YikAlert v-model="showYikAlert" :mask="false"></YikAlert>
    <button @click="showYikAlert1 = !showYikAlert1">YikAlert(开启关闭)</button>
    <YikAlert v-model="showYikAlert1" :mask="false"></YikAlert>
    <button @click="showYikAlert2 = !showYikAlert2">YikAlert(开启关闭)</button>
    <YikAlert v-model="showYikAlert2" :mask="false"></YikAlert>
    <br />
    <button @click="open('success', '恭喜你，这是一条成功消息')">
      YikMessage(success)
    </button>
    <button @click="open('info', '这是一条消息提示')">YikMessage(info)</button>
    <button @click="open('warn', '警告哦，这是一条警告消息')">
      YikMessage(warn)
    </button>
    <button @click="open('error', '错了哦，这是一条错误消息')">
      YikMessage(error)
    </button>
    <br />
    <button @click="showYikDialog = !showYikDialog">YikDialog(开启关闭)</button>
    <br />
    <button @click="openYikConFirm(true)">YikConfirm(开启关闭)</button>
    <YikDialog v-model="showYikDialog">
      <div style="color: #99999">这是一段信息</div>
      <div slot="footer">
        <button @click="showYikDialog = false">取消</button>
        <button @click="showYikDialog = false">确定</button>
      </div>
    </YikDialog>
  </div>
</template>

<script>
import { YikAlert, yikMessage, YikDialog, yikConfirm } from "@yik_l/alert";
yikMessage.style.success = {
  color: "#fff", // 设置颜色
  bg: "#0caf00", // 消息框背景色
};
yikMessage.style.info = {
  color: "#fff", // 设置颜色
  bg: "#afafaf", // 消息框背景色
};
yikMessage.style.warn = {
  color: "#fff", // 设置颜色
  bg: "#ff9200", // 消息框背景色
};
yikMessage.style.error = {
  color: "#fff", // 设置颜色
  bg: "#de0016", // 消息框背景色
};
export default {
  name: "app",
  data() {
    return {
      showYikAlert: false,
      showYikDialog: false,
      showYikAlert1: false,
      showYikAlert2: false,
    };
  },
  methods: {
    openYikConFirm(load) {
      yikConfirm({
        title: "提示",
        subtitle: "你确定要删除此数据吗？",
        cancelText: "取消",
        confirmText: "确定",
        isCloseMask: false,
        onClose: function () {
          console.log("点击了取消");
        },
        onConfirm: function ({ close, loading }) {
          console.log("点击了确定");
          if (load) {
            loading();
            setTimeout(function () {
              close();
            }, 2000);
          } else {
            close();
          }
        },
      });
    },
    open(type, msg) {
      yikMessage({
        type,
        msg,
      });
    },
  },
  components: { YikAlert, YikDialog },
};
</script>

<style lang="less" scoped>
#app {
}
</style>
